﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="upload.aspx.cs" Inherits="Baton.upload" %>

<!doctype html>
<html lang="en">

<head>
    <meta name="Generator" content="TPshop v1.1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" name="viewport" />
    <title>保存合照</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/html2canvas.js"></script>
    <script src="js/exif.js"></script>
    <style>
        #preview img {
            width: 100%;
        }

        input {
            opacity: 0;
            filter: alpha(opacity=0);
            height: 40px;
            width: 130px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9;
        }

        #capture {
            width: 259px;
            top: 10px;
            left: 16%;
            /*transform: translate(-50%, -50%);*/
            padding-bottom: 20px;
            box-sizing: border-box;
        }

        #capture>.up-k {
            width: 100%;
            margin: 0;
        }

        .btn-container {
            display: flex;
            justify-content: space-around;
            /*position: absolute;*/
            /*top: 465px;*/
            padding: 20px;
            padding-top: 0px;
        }

        .btn-container div {
            width: 40%;
        }

        .btn-container img {
            width: 100%;
            position: initial;
        }

        #capture #preview {
            width: 100%;
            top: 10%;
            left: 0%;
        }
        .long-click {
            background-color: #fff;
        }
    </style>

</head>

<body>
    <div class="upload-container">
        <img src="img/4.jpg" alt="" class="upload-bg">
        <div id="capture" class="up-container">
            <img src="./img/k<%=topic %>.png" alt="" class="up-k">
            <div class="up-pic">
                <!-- 上传照片 -->
                <div id="preview"></div>
            </div>
        </div>
        <div class="up">
            <input id="kujomiva" type="file" accept="image/*" onchange="preview(this)">
        </div>
        <div class="btn-container">
            <div><label for="kujomiva"><img src="img/up.png" alt="" class="btn-unselect"></label></div>
        </div>
    </div>
    
    <div class="long-click" style="display:block;">
        <img width="100%" id="test" src="" alt="">
    </div>
    
</body>
<script src="js/jquery-1.10.1.min.js"></script>
<script>
    $(function () {
        $('.btn-succ').click(function () {
            $('.fc').show();
        });
    })
    function preview(file) {
        var prevDiv = document.getElementById('preview');
        if (file.files && file.files[0]) {

            var reader = new FileReader();
            reader.readAsDataURL(file.files[0]);
            reader.onload = function (evt) {

                ////确认主题
                //$.ajax({
                //    type: "POST",
                //    url: "/ashx/mainHandler.ashx",
                //    data: {
                //        action: "savePic",
                //        img: evt.target.result
                //    },
                //    dataType: "json",
                //    success: function (result) {
                //        $("#preview").html('<img id="orientImg" src="' + result.url + '" />');

                //        $('#orientImg').load(function () {
                //            var shareContent = document.getElementById('capture');//需要截图的包裹的（原生的）DOM 对象
                //            var width = shareContent.offsetWidth; //获取dom 宽度
                //            var height = shareContent.offsetHeight; //获取dom 高度
                //            var canvas = document.createElement("canvas"); //创建一个canvas节点
                //            var scale = 2; //定义任意放大倍数 支持小数
                //            canvas.width = width * scale; //定义canvas 宽度 * 缩放
                //            canvas.height = height * scale; //定义canvas高度 *缩放
                //            canvas.getContext("2d").scale(scale, scale); //获取context,设置scale

                //            var opts = {
                //                scale: scale, // 添加的scale 参数
                //                canvas: canvas, //自定义 canvas
                //                logging: true, //日志开关
                //                width: width, //dom 原始宽度
                //                height: height, //dom 原始高度
                //                backgroundColor: 'transparent',
                //            };
                //            html2canvas(shareContent, opts).then(function (canvas) {
                //                IMAGE_URL = canvas.toDataURL("image/png");
                //                $('.up-k').attr('src', IMAGE_URL);
                //            })
                //        });

                //    }
                //});


                //return;


                // 方法2
                var image = new Image();
                image.src = event.target.result;

                var orientation;
                image.onload = function () {

                    EXIF.getData(image, function () { // 获取图像的数据

                        EXIF.getAllTags(this); // 获取图像的全部数据，值以对象的方式返回
                        orientation = EXIF.getTag(this, "Orientation"); // 获取图像的拍摄方向

                        var rotateCanvas = document.createElement("canvas"),
                            rotateCtx = rotateCanvas.getContext("2d");

                        // 针对图像方向进行处理
                        switch (orientation) {

                            case 1:
                                rotateCanvas.width = image.width;
                                rotateCanvas.height = image.height;
                                rotateCtx.drawImage(image, 0, 0, image.width, image.height);
                                break;
                            case 6: // 顺时针 90 度
                                rotateCanvas.width = image.height;
                                rotateCanvas.height = image.width;
                                rotateCtx.translate(0, 0);
                                rotateCtx.rotate(90 * Math.PI / 180);
                                rotateCtx.drawImage(image, 0, -image.height, image.width, image.height);
                                break;
                            case 8:
                                rotateCanvas.width = image.height;
                                rotateCanvas.height = image.width;
                                rotateCtx.translate(0, 0);
                                rotateCtx.rotate(-90 * Math.PI / 180);
                                rotateCtx.drawImage(image, -image.width, 0, image.width, image.height);
                                break;
                            case 3: // 180 度
                                rotateCanvas.width = image.width;
                                rotateCanvas.height = image.height;
                                rotateCtx.translate(0, 0);
                                rotateCtx.rotate(Math.PI);
                                rotateCtx.drawImage(image, -image.width, -image.height, image.width, image.height);
                                break;
                            default:
                                rotateCanvas.width = image.width;
                                rotateCanvas.height = image.height;
                                rotateCtx.drawImage(image, 0, 0, image.width, image.height);

                        }

                        var rotateBase64 = rotateCanvas.toDataURL("image/jpeg", 0.5);
                        $("#preview").html('<img id="orientImg" src="' + rotateBase64 + '" />')

                        var shareContent = document.getElementById('capture');//需要截图的包裹的（原生的）DOM 对象
                        var width = shareContent.offsetWidth; //获取dom 宽度
                        var height = shareContent.offsetHeight; //获取dom 高度
                        var canvas = document.createElement("canvas"); //创建一个canvas节点
                        var scale = 2; //定义任意放大倍数 支持小数
                        canvas.width = width * scale; //定义canvas 宽度 * 缩放
                        canvas.height = height * scale; //定义canvas高度 *缩放
                        canvas.getContext("2d").scale(scale, scale); //获取context,设置scale

                        var opts = {
                            scale: scale, // 添加的scale 参数
                            canvas: canvas, //自定义 canvas
                            logging: true, //日志开关
                            width: width, //dom 原始宽度
                            height: height, //dom 原始高度
                            backgroundColor: 'transparent',
                        };
                        html2canvas(shareContent, opts).then(function (canvas) {
                            IMAGE_URL = canvas.toDataURL("image/png");
                            $('.up-k').attr('src', IMAGE_URL);

                            $('.btn-unselect').hide();
                            $('.btn-container').html("合照成功，请长按图片进行保存");
                        })
                    });

                }
                

            };

        };

    }
    
</script>


<script>

</script>


</html>